<template>
  <div class="moneydetail">
    <hunk-head name="财务详情"></hunk-head>
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#FFAA58"></uni-segmented-control>
    <div class="search">
      <div class="searchInput">
        <uni-search-bar @confirm="searchConfirm" @input="searchInput" bgColor="#F3F2F6" cancelButton="none" radius="20" placeholder="请输入类别、对象、房屋地址"></uni-search-bar>
      </div>
      <div class="serachType" v-if="current == 0" @click="issearchTyoe()">
        筛选
        <img v-if="baseUrl" :src="baseUrl + 'home/moneydetail/shaixuan.png'" alt="" srcset="" />
      </div>
      <div class="serachClose" v-if="current == 0" @click="addShouru">
        <img v-if="baseUrl" :src="baseUrl + 'home/moneydetail/add.png'" alt="" srcset="" />
        添加
      </div>
      <div class="serachClose" v-if="current == 1" @click="add">
        <img v-if="baseUrl" :src="baseUrl + 'home/moneydetail/add.png'" alt="" srcset="" />
        添加
      </div>
    </div>
    <div class="searchTip" v-if="openType" @click="openType = false" :style="{ top: top + 'px' }">
      <div class="leftposition" :style="{ right: current ? '90px' : '15px' }">
        <div class="triangle"></div>
        <div class="typebtn">
          <div :class="['btntop', isonline ? '' : 'colorActiv']" @click.stop="openSerachType(0)">线上</div>
          <div :class="[isonline ? 'colorActiv' : '']" @click.stop="openSerachType(1)">线下</div>
        </div>
      </div>
    </div>
    <scroll-view
      class="prv-container content"
      scroll-y="true"
      @scrolltolower="_onLoadmore"
      :refresher-enabled="refresherEnabled"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="triggered = false"
      @refresherabort="triggered = false"
    >
      <div id="searchTT">
        <div class="list" v-if="current == 0">
          <div class="list-item" v-for="(item, index) in incomeList" :key="index">
            <div class="item-top">
              <div class="top-title">
                <div>{{ item.name }}</div>
                <img :src="item.paytype == 'offline' ? offline : online" />
              </div>
              <div class="top-money">
                <div style="marginright: 3px">+</div>
                <div>¥{{ item.amount }}</div>
              </div>
            </div>
            <div class="greyspace"></div>
            <div class="item-content">
              <div class="teshu">
                <div class="left">
                  <div class="greycolor">类型：</div>
                  <!--
                  <div>{{ getType(item.type) }}</div>
                  -->
                    <div>收入</div>
                </div>
                <div class="left">
                  <div class="greycolor">名目：</div>
                  <div>{{ item.name }}</div>
                </div>
              </div>
              <div class="teshu">
                <div class="left center">
                  <div class="greycolor">金额：</div>
                  <div>{{ item.amount }}</div>
                </div>
                <div class="left">
                  <div class="greycolor">支付类型：</div>
                  <div>{{ item.paytype=="offline"?'线下':'线上' }}</div>
                </div>
              </div>
              <div class="teshu">
                 <div class="left center">
                  <div class="greycolor">操作人：</div>
                  <div>{{ item.unickname }}</div>
                </div>
                <div class="left">
                  <div class="greycolor">支付方名称：</div>
                  <div>{{ item.payusername }}</div>
                </div>
              </div>
              <div class="teshu">
             
                  <div class="left center">
                  <div class="greycolor">时间：</div>
                  <div>{{ item.creattime }}</div>
                </div>
                <!-- <div class="left">
                  <div class="greycolor">备注：</div>
                  <div>{{ item.createtime }}</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="list zhichu" v-if="current == 1">
          <div class="list-item" v-for="(item, index) in payList" :key="index">
            <div class="item-top">
              <div class="top-title">
                <div>{{ item.reamk }}</div>
              </div>
              <div class="top-money">
                <div style="marginright: 3px">-</div>
                <div>¥{{ item.expendprice }}</div>
              </div>
            </div>
            <div class="greyspace"></div>
            <div class="item-content">
              <div class="teshu">
                <div class="left">
                  <div class="greycolor">支出项对象：</div>
                  <div>{{ item.expendobject }}</div>
                </div>
                <div class="left right">
                  <div class="greycolor">支出项状态：</div>
                  <div :style="{ color: state[item.state].color }">{{ state[item.state].text }}</div>
                </div>
              </div>
              <div class="teshu center">
                <div class="left">
                  <div class="greycolor">支付类别：</div>
                  <div>{{ item.expendstate == 1 ? '单次' : '长期' }}</div>
                </div>
                <div class="left right">
                  <div class="greycolor">支付周期：</div>
                  <div style="color: #4a4a4a">{{ expendcycle[item.expendcycle].text }}</div>
                </div>
              </div>
              <div class="left">
                <div class="greycolor">预计支出时间：</div>
                <div :style="{ color: state[item.state].color }">{{ item.firsttime }}</div>
              </div>
            </div>
            <div class="btn">
              <div class="btn1" v-if="item.state !== 1" @click="editorcomplete(item)">标记完成</div>
              <div @click="edit(item)">编辑</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isnone < 1" class="none">
        <img v-if="baseUrl" :src="baseUrl + 'imgs/imgs/none.png'" alt="" />
      </div>
    </scroll-view>
    <uni-popup ref="popup" type="center">
      <div class="edit">
        <div class="close" @click="closePopup">
          <img v-if="baseUrl" :src="baseUrl + 'order/close.png'" alt="" srcset="" />
        </div>
        <div class="edit-top">{{ isedit == 1 ? '编辑' : '添加' }}支出项</div>
        <div class="edit-form">
          <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="支出项类别" name="expendtype" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.expendtype" placeholder="请输入支出项类别" />
            </uni-forms-item>
            <uni-forms-item label="支出项对象" name="expendobject" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.expendobject" placeholder="请输入支出项对象" />
            </uni-forms-item>
            <uni-forms-item label="支出项金额" name="expendprice" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.expendprice" placeholder="请输入支出项金额" />
            </uni-forms-item>
            <!-- <uni-forms-item label="首次支出时间" name="firsttime" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.firsttime" placeholder="请输入首次支出时间" />
            </uni-forms-item> -->
            <uni-forms-item label="首次支出时间" name="firsttime" :label-width="120">
              <uni-datetime-picker type="date" :value="formData.firsttime" :border="false" @change="checkStartTime">
                <div class="time" v-if="formData.firsttime">{{ formData.firsttime }}</div>
                <div class="timeimage" v-else>
                  <div>请输入首次支出时间</div>
                </div>
              </uni-datetime-picker>
            </uni-forms-item>
            <uni-forms-item name="expendstate" label="支付类别" :label-width="120">
              <uni-data-checkbox selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.expendstate" :localdata="leaseMode" />
            </uni-forms-item>
            <uni-forms-item name="expendcycle" label="支付周期" :label-width="120" class="cycleItme">
              <uni-data-checkbox selectedColor="#FFBD6C" selectedTextColor="#4A4A4A" v-model="formData.expendcycle" :localdata="expendcycle" />
            </uni-forms-item>
            <uni-forms-item name="reamk" label="备注" :label-width="120" class="cycleItme beizhu">
              <uni-easyinput type="textarea" v-model="formData.reamk" placeholder="请输入备注..."></uni-easyinput>
            </uni-forms-item>
          </uni-forms>
          <div class="popup-btn">
            <!-- <button form-type="submit" class="subBtn">提交</button> -->
            <button class="subBtn" @click="submit(isedit)">提交</button>
          </div>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="popup2" type="center">
      <div class="edit">
        <div class="close" @click="closePopup">
          <img v-if="baseUrl" :src="baseUrl + 'order/close.png'" alt="" srcset="" />
        </div>
        <div class="edit-top">{{ isedit == 1 ? '编辑' : '添加' }}收入项</div>
        <div class="edit-form">
          <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <uni-forms-item label="收入名目" name="expendtype" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.name" placeholder="请输入收入名目" />
            </uni-forms-item>
            <uni-forms-item label="收入金额" name="expendobject" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.amount" placeholder="请输入收入金额" />
            </uni-forms-item>
            <uni-forms-item label="支付方名称" name="expendobject" :label-width="120">
              <uni-easyinput type="text" :inputBorder="false" v-model="formData.payusername" placeholder="请输入支付方名称" />
            </uni-forms-item>
           
            <uni-forms-item name="reamk" label="备注" :label-width="120" class="cycleItme beizhu">
              <uni-easyinput type="textarea" v-model="formData.reamk" placeholder="请输入备注..."></uni-easyinput>
            </uni-forms-item>
          </uni-forms>
          <div class="popup-btn">
            <!-- <button form-type="submit" class="subBtn">提交</button> -->
            <button class="subBtn" @click="submit2(isedit)">提交</button>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
const imgUrl = `${process.env.VUE_APP_BASE_IMG_URL}`
import Head from '@componentsMine/head'
import { incomelist, expendlist, editorcomplete, update, save,GetMyInComeList ,savetwo} from '@/apis/money'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      refresherEnabled: true,
      triggered: false,
      top: 0,
      online: imgUrl + 'home/moneydetail/online.png',
      offline: imgUrl + 'home/moneydetail/offline.png',
      current: 0,
      items: ['收入', '支出'],
      isonline: -1,
      openType: false,
      leaseMode: [
        { value: 0, text: '单次' },
        { value: 1, text: '长期' }
      ],
      expendcycle: [
        { value: 0, text: '月付' },
        { value: 1, text: '两月付' },
        { value: 2, text: '季付' },
        { value: 3, text: '半年' },
        { value: 4, text: '年付' }
      ],
      formData: {
        expendtype: '',
        expendobject: '',
        expendprice: '',
        firsttime: '',
        expendstate: 0,
        expendcycle: 2,
        reamk: '',
        userid: this.userid
      },
      rules: {
        // name: {
        //   rules: [
        //     {
        //       required: true,
        //       errorMessage: '请输入姓名',
        //     }
        //   ]
        // }
      },
      limit: 10,
      offsetIn: 1,
      offsetOn: 1,
      incomeList: [
        {
          communityname: '', //房屋地址
          createtime: '', //创建时间
          oid: 0, //主键id
          operatorname: '', //收入项操作人
          paytype: '', //支付方式 alipay 支付宝  wx 微信  offline 线下
          profitname: '', //收入项对象
          rent: 0, //收入金额
          title: '' //收入标题
        }
      ],
      payList: [
        // {
        //   "createtime": "",   //创建时间
        //   "expendcycle": 0,   //支付周期  0-月 1-2月 2-季付 3-半年付 4-年付
        //   "expendobject": "",  //支出对象
        //   "expendprice": 0,  //支出金额
        //   "expendstate": 0,  //支出类别 0-单次 1-长期
        //   "expendtype": "",  //支出类型
        //   "firsttime": "",  //首次支出时间
        //   "reamk": "",  //说明
        //   "state": 0,  //状态 1-已完成 0-未完成 2-已逾期
        //   "userid": 0,   //添加者id
        //   "wid": 0
        // }
      ],
      state: [
        { color: '#FC913A', text: '未完成' },
        { color: '#12CB6E', text: '已完成' },
        { color: '#F0352B', text: '已逾期' }
      ],
      isedit: 0,
      likestr: '',
      isflag: true,
      timer: null
    }
  },
  created() {
    this.offsetIn = 1
    this.incomelist()
    // this.expendlist()
  },
  computed: {
    getType(){
      return (type)=>{
        //1 房租 2押金 3电费充值 4 其他 手动记账
        if(type == 1){
          return '房租'
        }else if(type == 2){
          return '押金'
        }else if(type == 3){
          return '电费充值'
        }else if(type == 4){
          return '其他'
        }else if(type == 5){
          return '手动记账'
        }
      }
    },
    userid() {
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL
    },
    isnone() {
      if (this.current == 0) {
        if (this.incomeList) {
          return this.incomeList.length
        } else {
          return false
        }
      } else {
        if (this.payList) {
          return this.payList.length
        } else {
          return false
        }
      }
    }
  },
  methods: {
    checkStartTime(e) {
      this.formData.firsttime = e
    },
    // gobanck(){
    //   uni.redirectTo({ url: '/pages/index/index' })
    // },
    onRefresh() {
      this.triggered = 'restore'
      if (this.current == 0) {
        this.offsetIn = 1
        this.incomelist()
      } else {
        this.offsetOn = 1
        this.expendlist()
         this.incomelist()
      }
      setTimeout(() => {
        this.triggered = false
      }, 1000)
    },
    incomelist() {
      const data = {
        likestr: this.likestr,
        limit: this.limit,
        offset: this.offsetIn,
        userid: this.userid,
        isonline: this.isonline
      }
      incomelist(data).then((res) => {
        if (res.code == 200) {
          this.incomeList = res.data
          if (this.offsetIn === 1) {
            this.incomeList = res.data
          } else if (this.incomeList.length >= res.total) {
            return
          } else {
            this.incomeList = this.incomeList.concat(res.data)
          }
          if (!res.data) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    expendlist() {
      const data = {
        likestr: this.likestr,
        limit: this.limit,
        offset: this.offsetOn,
        userid: this.userid
      }
      expendlist(data).then((res) => {
        if (res.code == 200) {
          this.payList = res.data
          if (this.offsetOn === 1) {
            this.payList = res.data
          } else if (this.payList.length >= res.total) {
            return
          } else {
            this.payList = this.payList.concat(res.data)
          }
          if (!res.data) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    _onLoadmore() {
      if (this.current == 1) {
        ++this.offsetIn
        this.incomelist()
      } else {
        ++this.offsetOn
        this.expendlist()
      }
    },
    //标记完成
    editorcomplete(item) {
      const data = {
        state: 1,
        wid: item.wid
      }
      editorcomplete(data).then((res) => {
        if (res.code == 200) {
          this.expendlist()
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    onClickItem(e) {
      this.current = e.currentIndex
      if (this.current == 1) {
        this.offsetIn = 1
        this.expendlist()
      } else {
        this.offsetOn = 1
        this.incomelist()
      }
    },
    searchConfirm(e) {
      if (this.current == 1) {
        this.likestr = e.value
        this.offsetOn = 1
        this.expendlist()
      } else {
        this.likestr = e.value
        this.offsetIn = 1
        this.incomelist()
      }
    },
    searchInput(e) {
      this.likestr = e.value
      if (!this.isflag) return
      this.isflag = false
      let that = this
      if (this.current == 1) {
        this.timer = setTimeout(function () {
          that.offsetOn = 1
          that.expendlist()
          that.isflag = true
        }, 2000)
      } else {
        this.timer = setTimeout(function () {
          that.offsetIn = 1
          that.incomelist()
          that.isflag = true
        }, 2000)
      }
    },
    issearchTyoe() {
      this.openType = !this.openType
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.prv-container')
        .boundingClientRect((data) => {
          this.top = data.top
        })
        .exec()
    },
    openSerachType(id) {
      this.isonline = id
      this.offsetIn = 1
      this.incomelist()
      this.openType = false
    },
    edit(item) {
      this.isedit = 1
      this.formData = { ...item, userid: this.userid }
      this.$refs.popup.open()
    },
    add() {
      this.isedit = 0
      this.formData = {
        expendtype: '',
        expendobject: '',
        expendprice: '',
        firsttime: '',
        expendstate: 0,
        expendcycle: 2,
        reamk: '',
        userid: this.userid
      }
      this.$refs.popup.open()
    },
     addShouru() {
      this.isedit = 0
      this.formData = {
        expendtype: '',
        expendobject: '',
        expendprice: '',
        firsttime: '',
        expendstate: 0,
        expendcycle: 2,
        reamk: '',
        userid: this.userid
      }
      this.$refs.popup2.open()
    },
    closePopup() {
      this.$refs.popup.close()
      this.$refs.popup2.close()
    },
    submit(id) {
      let that = this
      if (id) {
        update(that.formData).then((res) => {
          if (res.code == 200) {
            that.likestr = ''
            that.offset = 1
            that.expendlist()
            that.$refs.popup.close()
          }
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        })
      } else {
        save(that.formData).then((res) => {
          if (res.code == 200) {
            that.likestr = ''
            that.offset = 1
            that.expendlist()
            that.$refs.popup.close()
          }
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        })
      }
    },
     submit2(id) {
      let that = this
      if (id) {
        update(that.formData).then((res) => {
          if (res.code == 200) {
            that.likestr = ''
            that.offset = 1
            that.expendlist()
            that.$refs.popup.close()
          }
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        })
      } else {
        savetwo(that.formData).then((res) => {
          if (res.code == 200) {
            that.likestr = ''
            that.offset = 1
            that.$refs.popup.close()
            that. closePopup()
            that.incomelist()
          }
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        })
      }
    }
  },
  
  beforeDestroy() {
    clearTimeout(this.timer)
    this.timer = null
  }
}
</script>

<style lang="scss" scoped>
.moneydetail {
  // @include num();
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  height: 100%;
  .none {
    width: 100vw;
    margin-top: 40px;
    // background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      width: 190px;
      height: 195px;
    }
  }
  .search {
    margin-top: 2px;
    width: 100%;
    height: 47px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .searchInput {
      flex: 1;
    }
    ::v-deep .uni-searchbar {
      padding: 0;
      .uni-searchbar__box {
        // width: 291px;
        height: 30px;
        background: #f3f2f6;
        border-radius: 20px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4a4a4a;
        line-height: 30px;
        justify-content: flex-start;
        input::placeholder {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          line-height: 30px;
        }
        .uni-searchbar__box-search-input {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 30px;
        }
        .uni-searchbar__text-placeholder {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          line-height: 30px;
        }
      }
    }
    .serachType {
      display: flex;
      width: 48px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 47px;
      margin-left: 10px;
      justify-content: center;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
        margin-right: 3px;
      }
    }
    .serachClose {
      display: flex;
      box-sizing: border-box;
      // width: 48px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4a4a4a;
      line-height: 20px;
      margin-left: 10px;
      justify-content: center;
      align-items: center;
      // border-left: 2px solid #EFEFEF;
      padding-left: 9px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 3px;
      }
    }
  }
  .searchTip {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 133px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    .leftposition {
      position: absolute;
      top: 3px;
    }
    .triangle {
      width: 0px;
      height: 0px;
      border-bottom: 9px solid #ffffff;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      // box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.42);
      position: absolute;
      right: 10px;
      top: -6px;
    }
    .typebtn {
      width: 68px;
      // height: 95px;
      background: #ffffff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.42);
      div {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a4a4a;
        line-height: 40px;
        text-align: center;
      }
      .colorActiv {
        color: #ffaa58;
      }
      .btntop {
        border-bottom: 2px solid #efefef;
      }
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
    // position: relative;

    .list-item {
      margin-top: 10px;
      background-color: #fff;
      .item-top {
        box-sizing: border-box;
        padding: 0 15px;
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-title {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            margin-left: 10px;
            width: 34px;
            height: 16px;
          }
        }
        .top-money {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4a4a4a;
          line-height: 36px;
        }
      }
      .greyspace {
        height: 1px;
        background-color: #efefef;
      }
      .item-content {
        box-sizing: border-box;
        padding: 9px 15px 13px 15px;
        .teshu {
          height: 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;
        }
        .greycolor {
          color: #9b9b9b;
        }
        .left {
          display: flex;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4a4a4a;
          line-height: 20px;
        }

        .center {
          margin: 10px 0;
        }
      }
      .btn {
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 10px;
        padding-right: 10px;
        .btn1 {
          margin-right: 10px;
        }
        div {
          height: 24px;
          background: linear-gradient(315deg, #ffaa58 0%, #ffbd6c 100%);
          border-radius: 13px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          text-align: center;
          padding: 0 16px;
        }
      }
    }
  }
  .edit {
    width: 335px;
    // height: 584px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 4px;
    .close {
      position: absolute;
      top: 22px;
      right: 15px;
      width: 18px;
      height: 18px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .edit-top {
      height: 60px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4a4a4a;
      line-height: 60px;
      text-align: center;
      border-bottom:1rpx solid #ddd;
    }
  }
  .popup-btn {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    margin-top: 20px;
    .subBtn {
      width: 315px;
      height: 45px;
      background: linear-gradient(315deg, #ffaa58 0%, #ffbd6c 100%);
      border-radius: 100px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 45px;
    }
  }
}
::v-deep .segmented-control {
  height: 45px;
  background: #ffffff;
  .segmented-control__text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffaa58;
    line-height: 45px;
  }
  .segmented-control__item--text {
    border-bottom-width: 3px;
  }
  .segmented-control__item:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2px;
    height: 20px;
    background-color: #efefef;
    // border: 1px solid ;
  }
}
::v-deep .uni-forms {
  background: #ffffff;
  .uni-forms-item:first-child {
    border-top: 1px solid #efefef;
  }
  .uni-forms-item {
    // height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #efefef;
    .uni-forms-item__box {
      margin: 0 15px;
      .uni-error-message {
        right: 0;
        left: auto;
        .uni-error-message-text {
          line-height: 10px;
          font-size: 10px;
        }
      }
      .uni-forms-item__inner {
        margin: 0;
        padding: 0;
      }
    }

    .uni-forms-item__label {
      padding: 0;
      height: 48px;
      .label-text {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 21px;
      }
    }
    .uni-forms-item__content {
      height: 48px;
      text-align: right;
      .uni-data-checklist {
        margin-bottom: 6px;
        height: 33px;
        .checklist-group {
          height: 100%;
          justify-content: flex-end;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4a4a4a;
          line-height: 35px;
          .checklist-box {
            position: static;
            margin: 0;
            margin-right: 10px;
          }
          .checklist-box:last-child {
            margin-right: 0;
          }
        }
      }
      .uni-easyinput {
        .uni-easyinput__content {
          .uni-easyinput__content-input {
            height: 45px;
            text-align: right;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #4a4a4a;
          }
          .uni-easyinput__placeholder-class {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #9b9b9b;
          }
          // input::placeholder{
          //   font-size: 14px;
          //   font-family: PingFangSC-Medium, PingFang SC;
          //   font-weight: 500;
          //   line-height: 45px;
          //   color: red;
          // }
        }
      }
      .uni-date {
        .uni-date-editor {
          // div{
          //   font-size: 14px;
          //   font-family: PingFangSC-Medium, PingFang SC;
          //   font-weight: 500;
          //   color: #9B9B9B;
          //   line-height: 45px;
          // }
          .timeimage div {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #9b9b9b;
          }
          .time {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #4a4a4a;
          }
        }
      }
      .address {
        height: 45px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a4a4a;
        line-height: 45px;
      }
    }
  }
  .uni-forms-item:last-child {
    border-bottom: 0;
  }
  .cycleItme {
    height: auto;
    .is-direction-left {
      flex-direction: column;
      .uni-data-checklist .checklist-group {
        justify-content: space-between;
      }
      .uni-forms-item__label {
        height: auto;
        margin-top: 13px;
      }
      .uni-forms-item__content {
        margin-top: 10px;
        height: auto;

        .uni-easyinput__placeholder-class {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #4a4a4a;
          line-height: 20px;
        }
      }
    }
  }
  .beizhu {
    .uni-forms-item__content {
      background: #f9f9f9;
    }
  }
}
</style>
